<template>
  <div class="step_stage">
    <div class="step-box">
      <!-- 'width': `calc(1/${stage.length}*100% - 10px)` :style="{'backgroundColor': item.backcolor}"-->
      <div class="bgDiv" v-for="(item,index) in stage" :key="index" :title="item.name" :class="[index + 1 === active ? 'active' : '','step_once']">
        <!-- <span class="stepName" :style="{'color': item.fontcolor}"><span class="ordernum">{{item.ordernum}}</span>&nbsp;&nbsp;{{item.name}}&nbsp;&nbsp; {{item.sum}}</span> -->
        <div class="stepBox" :style="{'color': item.fontcolor}">
          <div class="stepBoxName">
            <span class="stepBoxNum">{{item.ordernum}}</span>
            <span class="stepNeed">{{item.name}}</span>
          </div>
          <div style="cursor:pointer;" @click="jumpToView(item)">总计：<span style="color:#409EFF;">{{item.sum}}</span></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  customStage,
} from "@/api.js"
export default {
  data() {
    return {
      stage: [], //阶段数据
    }
  },
  created() {
    this.toGetCustomStage()
  },
  methods: {
    toGetCustomStage() {
      customStage(
        {
          onSucess: response => {
            if(response.data) {
              let data = response.data
              this.stage = data
              for(let i = 0; i < this.stage.length; i ++) {
                if(this.stage[i].isdefault) {
                  this.currentStage = this.stage[i]
                  break;
                }
              }
            }
            console.log(response,'response')
          }
        }
      ) 
    },
    jumpToView(item) {
      console.log(item)
      let exparams = `&stage=${item.stage}`
      let params = {
        linkType: '01',
        appId: item.appid,
        actionContent:item.viewid,
        active: true,
        name: item.name,
        exparams: exparams,
        id:item.stage,
      }
      top.obpmOAction('addTab',params)
    }
  }
}
</script>

<style>
@import "../assets/style/widgetStage.scss";
</style>